<template>
  <div class="RefundDialog">
    <el-dialog
      title="退费123"
      :visible.sync="$parent.RefundDialogFlag"
      width="30%"
      v-dialogDrag
      border
      @close="closeDialog()"
    >
      <el-form
        :model="saveData"
        :rules="rules"
        :inline="true"
        label-width="120px"
        ref="Refund"
        :disabled="saveFlag"
      >
        <el-row :gutter="5">
          <span class="itemName">
            退费项目：
            <i class="itemContent">{{RowSelection.itemName}}</i>
          </span>
          <span class="itemName">
            单价：
            <i class="itemContent">{{RowSelection.itemPrice}}</i>元
          </span>
          <span class="itemName">
            数量：
            <i class="itemContent">{{RowSelection.itemNumber}}</i>个
          </span>
          <span class="itemName">
            应收：
            <i
              class="itemContent"
            >{{RowSelection.itemCharge-RowSelection.discountCharge-RowSelection.benefitCharge}}</i>元
          </span>
          <span class="itemName">
            单位：
            <i class="itemContent">{{RowSelection.itemUnit}}</i>
          </span>
          <span class="itemName">
            优惠：
            <i class="itemContent">{{RowSelection.discountCharge}}</i>元
          </span>
          <span class="itemName">
            减免：
            <i class="itemContent">{{RowSelection.benefitCharge}}</i>元
          </span>
          <span class="itemName">
            实收：
            <i class="itemContent">{{RowSelection.realityCharge}}</i>元
          </span>
        </el-row>
        <el-row :gutter="5">退费后新费用</el-row>
        <el-row :gutter="5">
          <el-form-item label="单价" prop="itemPrice">
            <el-input
              v-model="saveData.chargeItem.itemPrice"
              type="number"
              :disabled="saveData.chargeItem.asFixPrice==0?false:true"
            ></el-input>
          </el-form-item>
          <el-form-item label="数量:" prop="itemNumber">
            <el-input v-model="saveData.chargeItem.itemNumber" type="number"></el-input>
          </el-form-item>
        </el-row>
        <el-row :gutter="5">
          <el-form-item label="优惠" prop="discountCharge">
            <el-input v-model="saveData.chargeItem.discountCharge" type="number"></el-input>
          </el-form-item>
          <el-form-item label="减免:" prop="benefitCharge">
            <el-input v-model="saveData.chargeItem.benefitCharge" type="number"></el-input>
          </el-form-item>
        </el-row>
        <el-row :gutter="5">
          <el-form-item label="应收总额:">
            <el-input v-model="ChargeData.total" :disabled="true" :maxlength="20"></el-input>
          </el-form-item>
          <el-form-item label="实收总额:">
            <el-input v-model="ChargeData.realityCharge" :disabled="true" :maxlength="20"></el-input>
          </el-form-item>
        </el-row>
        <el-row :gutter="5">
          <el-form-item label="备注:">
            <el-input type="textarea" v-model="saveData.chargeItem.Remark" style="width: 534px;"></el-input>
          </el-form-item>
        </el-row>
        <hr />
        <el-row class="font16">
          <div style="line-height: 40px;text-align: right">
            总应收:
            <span class="totalw">{{Charge.total}}</span>元，
            优惠:
            <span class="totalw">{{Charge.discountCharge}}</span>元，
            减免:
            <span class="totalw">{{Charge.benefitCharge}}</span>元，
            待结算金额:
            <span class="totalw">{{Charge.realityCharge}}</span>元
          </div>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button type="primary" @click="Save()">结算</el-button>
        <el-button @click="Cancel()">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import * as Type from "@/api/service";
import { validPhone } from "@/utils/validate";
import { dataFormate } from "@/utils/index";
import { toFixed } from "@/utils/tofixed";
export default {
  name: "RefundDialog",
  props: {
    RefundDialogFlag: {
      type: Boolean
    },
    RowSelection: {
      type: Object,
      require: true
    },
    businessCode: {
      type: String,
      default: ""
    }
  },
  created() {},
  mounted() {
    // //按钮权限 按钮的权限来自于父窗口的权限，这里不是从route传过来的，在此处关闭
    // //   this.btnRight = this.$route.meta.buttons;
    // this.$store.dispatch('user/getdictionary').then((res) => {
    //   //获取字典数据
    //   this.dictionary = res;
    //   this.$set(this.dictionary, res)
    // }).catch(()=>console.log('promise catch err'))
    //初始值项目名称
    //项目名称
  },
  data() {
    return {
      saveFlag: false, //保存过程中不可更改,true为正在保存
      dictionary: {}, //字典
      saveData: {
        businessCode: this.businessCode,
        refundItem: {
          id: this.RowSelection.id,
          version: this.RowSelection.version
        },
        chargeItem: {
          id: 0,
          businessCode: this.businessCode,
          serviceItemId: this.RowSelection.serviceItemId,
          itemName: this.RowSelection.itemName,
          itemPrice: "",
          itemNumber: "",
          itemUnit: this.RowSelection.itemUnit,
          itemCharge: "",
          discountCharge: "",
          benefitCharge: "",
          realityCharge: "",
          chargeTime: "2020-02-29 19:30",
          asSettled: 0,
          asBusiness: 0,
          asRefund: 0,
          chargeSettleId: this.RowSelection.chargeSettleId,
          version: 0
        }
      },
      rules: {
        id: [{ required: true, message: "请选择结算项目", trigger: "blur" }],
        settleTime: [
          { required: true, message: "请选择结算日期", trigger: "blur" } //这里需要用到全局变量
        ],
        settleUser: [
          { required: true, message: "请输入经办人", trigger: "blur" }
        ]
      },
      formLabelWidth: "120px",
      onpresscTime: 0 //  阻止短时间内连续点击
      // btnlimits: {//按钮权限
      // btnNowPaySave: true,  //提交保存
      // btnNowPayCancel: true,//取消
      // }
    };
  },
  watch: {
    "$parent.RefundFlag"() {
      this.$parent.RefundFlag = this.RefundFlag;
      if (this.$parent.RefundFlag == false) {
        this.$nextTick(() => {
          this.$refs.Refund.resetFields();
        });
      }
    }, //监听数据。单位发生变化
    "$parent.RefundDialogFlag"() {
      if (this.$parent.RefundDialogFlag == true) {
        //初始化数据
        this.initData();
      }
    }
  },
  methods: {
    //保存
    Save() {
      if (Date.now() - this.onpresscTime > 2000) {
        this.onpresscTime = Date.now();
        console.log(Date.now());
      } else {
        return;
      }
      this.saveFlag = true;
      //应收
      this.saveData.chargeItem.itemCharge = this.ChargeData.total;
      //实收
      this.saveData.chargeItem.realityCharge = this.ChargeData.realityCharge;
      //日期
      this.saveData.chargeItem.chargeTime = dataFormate(new Date());
      //价格
      this.saveData.chargeItem.itemPrice = this.saveData.chargeItem.itemPrice;
      //数量
      this.saveData.chargeItem.itemNumber = this.saveData.chargeItem.itemNumber;
      //减免
      this.saveData.chargeItem.discountCharge = this.saveData.chargeItem.discountCharge;
      //优惠
      this.saveData.chargeItem.benefitCharge = this.saveData.chargeItem.benefitCharge;
      //收费业务id
      this.saveData.chargeItem.chargeSettleId = this.RowSelection.chargeSettleId;
      //业务编码
      this.saveData.chargeItem.businessCode = this.businessCode;
      //服务项目外键
      this.saveData.chargeItem.serviceItemId = this.RowSelection.serviceItemId;
      //冲减业务id和version
      this.saveData.refundItem.id = this.RowSelection.id;
      //冲减业务version
      this.saveData.refundItem.version = this.RowSelection.version;
      //业务编码
      this.saveData.businessCode = this.businessCode;
      let postData = this.saveData;
      Type["saveRetailChargeSettleToRefund"](postData)
        .then(response => {
          let result = response;
          if (result) {
            this.$message("保存成功");
            this.$parent.RefundDialogFlag = false;
          }
          this.saveFlag = false;
        })
        .catch(error => {
          this.$message(error);
          this.saveFlag = false;
        });
    },
    Cancel() {
      this.$parent.RefundDialogFlag = false;
      this.$parent.RowSelection = {};
      this.saveData.chargeItem = {};
    },
    closeDialog() {
      //关闭退费窗口
      this.$parent.RefundDialogFlag = false;
      this.$parent.RowSelection = {};
      this.saveData.chargeItem = {};
    }, //初始化数量
    initData() {
      //单价
      this.$set(
        this.saveData.chargeItem,
        "itemPrice",
        this.RowSelection.itemPrice
      );
      //项目数量
      this.$set(
        this.saveData.chargeItem,
        "itemNumber",
        '0'
      );
      //项目单位
      this.saveData.chargeItem.itemUnit = this.RowSelection.itemUnit;
      //优惠
      this.$set(
        this.saveData.chargeItem,
        "discountCharge",
        this.RowSelection.discountCharge
      );
      //减免
      this.$set(
        this.saveData.chargeItem,
        "benefitCharge",
        this.RowSelection.benefitCharge
      );
      //应收总额=实收总额-优惠-减免
      this.saveData.chargeItem.itemCharge =
        this.RowSelection.itemCharge -
        this.RowSelection.discountCharge -
        this.RowSelection.benefitCharge;
      //实收
      this.saveData.chargeItem.realityCharge = this.RowSelection.realityCharge;
      //名称
      this.saveData.chargeItem.itemName = this.RowSelection.itemName;
      //是否固定价格
      this.saveData.chargeItem.asFixPrice = this.RowSelection.asFixPrice;
    }
  },
  computed: {
    Charge() {
      let charge = {
        total: 0,
        Settled: 0,
        discountCharge: 0,
        benefitCharge: 0,
        realityCharge: 0
      };
      //冲红费用
      let data = this.saveData.chargeItem;
      //冲减费用
      let dataOld = this.RowSelection;

      if (data && dataOld) {
        if (
          data.itemPrice &&
          data.itemNumber &&
          dataOld.itemPrice &&
          dataOld.itemNumber
        ) {
          //实际费用,新实际减去实际支付的
          charge.total =
            Number(data.itemPrice) * Number(data.itemNumber) -
            Number(dataOld.itemPrice) * Number(dataOld.itemNumber);
        }
        //实际支付的减去实际优惠的
        charge.discountCharge =
          Number(dataOld.discountCharge) - Number(data.discountCharge); //优惠
        charge.benefitCharge =
          Number(dataOld.benefitCharge) - Number(data.benefitCharge); //减免
        //新发生的费用，减去实际支付的费用
        charge.realityCharge =
          Number(data.itemPrice) * Number(data.itemNumber) -
          Number(data.discountCharge) -
          Number(data.benefitCharge) -
          (Number(dataOld.itemPrice) * Number(dataOld.itemNumber) -
            Number(dataOld.discountCharge) -
            Number(dataOld.benefitCharge)); //待结算金额
        for (let i in charge) {
          charge[i] = toFixed(charge[i], 2);
        }
      }
      return charge;
    },
    //计算新费用
    ChargeData() {
      let chargedData = {
        total: 0,
        Settled: 0,
        discountCharge: 0,
        benefitCharge: 0,
        realityCharge: 0
      };
      let data = this.saveData.chargeItem;
      if (data) {
        if (data.itemPrice && data.itemNumber) {
          chargedData.total = Number(data.itemPrice) * Number(data.itemNumber);
        }
        //优惠
        chargedData.discountCharge = Number(data.discountCharge);
        //减免
        chargedData.benefitCharge = Number(data.benefitCharge);
        //待结算金额
        chargedData.realityCharge =
          chargedData.total -
          chargedData.discountCharge -
          chargedData.benefitCharge;
        for (let i in chargedData) {
          chargedData[i] = toFixed(chargedData[i], 2);
        }
      }
      return chargedData;
    }
  }
};
</script>
<style>
.RefundDialog n .RefundDialog .el-dialog__title,
.RefundDialog .el-dialog__headerbtn .el-dialog__close {
  color: white;
}

.RefundDialog .el-dialog {
  min-width: 800px !important;
}

.RefundDialog .el-input,
.RefundDialog .el-select,
.RefundDialog .el-form-item__content {
  width: 200px;
}

.RefundDialog .el-textarea__inner {
  width: 534px;
}

.RefundDialog .el-icon-check[data-v-7f39c8b7]:before {
  margin-left: 0em;
}
</style>
<style scoped>
@media screen and (max-width: 300px) {
  body {
    background-color: lightblue;
  }
}

.tablewrapper {
  display: flex;
}

.tablewrapper .table {
  display: inline-block;
  flex: 1;
  width: 50%;
  padding: 0 1em;
  border: 1px solid rgb(220, 223, 230);
}

.tablewrapper .table .title {
  font-size: 1rem;
  font-weight: 700;
  line-height: 3rem;
}

.tablewrapper .table .tablecont {
  padding: 1em;
  line-height: 2em;
  text-indent: 2em;
}

.el-icon-close:before {
  color: red;
  font-size: 1.5em;
  line-height: 2em;
}

.el-icon-check:before {
  color: green;
  font-size: 1.5em;
  line-height: 2em;
  margin-left: 1em;
}
.totalw {
  display: inline-block;
  width: 80px;
  font-weight: 600;
}
</style>
